import React from 'react';
import { PageHeader } from 'antd';

import SetPasswordForm from '../../views/user/SetPasswordForm';
import UserContext from '../../components/common/UserContext';

export default class SetPasswordPage extends React.Component {
  state = {
    minHeight: 500,
  };

  componentDidMount() {
    this.updateMinHeight();
    global.window.addEventListener('resize', this.updateMinHeight);
  }

  componentWillUnmount() {
    global.window.removeEventListener('resize', this.updateMinHeight);
  }

  updateMinHeight = () => {
    const minHeight = global.window.innerHeight - 64 - 16 * 2 - (18 + 24 * 2);
    this.setState({ minHeight });
  }

  render() {
    const { minHeight } = this.state;
    return (
      <div style={{ minHeight }}>
        <PageHeader
          title="设置密码"
          avatar={{ icon: 'lock', style: { color: '#f56a00', backgroundColor: '#fde3cf' } }}
        />
        <div style={{ borderTop: '1px solid #ddd' }}>
          <SetPasswordForm user={this.context} />
        </div>
      </div>
    );
  }
}

SetPasswordPage.contextType = UserContext;
